<template>
  <div class="register-container">
    <!-- 注册页头部 -->
    <div class="register-header">
      <div class="logo-container">
        <img src="@/assets/logo.png" alt="Logo" class="logo" />
        <h1 class="site-name">{{ defaultSettings.title }}</h1>
      </div>
      <div class="header-actions">
        <el-switch
          v-model="isDark"
          inline-prompt
          active-icon="Moon"
          inactive-icon="Sunny"
          @change="toggleTheme"
        />
        <lang-select class="lang-select" />
      </div>
    </div>

    <!-- 注册页内容 -->
    <div class="register-content">
      <div class="register-banner">
        <div class="banner-text">
          <h2>欢迎加入</h2>
          <p>创建您的账户以访问我们的服务</p>
        </div>
      </div>

      <div class="register-form-container">
        <el-form
          ref="registerFormRef"
          :model="registerForm"
          :rules="registerRules"
          class="register-form"
          label-position="top"
        >
          <div class="form-header">
            <h2>用户注册</h2>
            <p class="form-subtitle">请填写以下信息创建账户</p>
          </div>

          <!-- 用户名 -->
          <el-form-item prop="username" label="用户名">
            <div class="input-wrapper">
              <el-icon><User /></el-icon>
              <el-input
                v-model="registerForm.username"
                placeholder="请输入用户名"
                name="username"
                size="large"
              />
            </div>
          </el-form-item>

          <!-- 昵称 -->
          <el-form-item prop="nickname" label="昵称">
            <div class="input-wrapper">
              <el-icon><Avatar /></el-icon>
              <el-input
                v-model="registerForm.nickname"
                placeholder="请输入昵称"
                name="nickname"
                size="large"
              />
            </div>
          </el-form-item>

          <!-- 密码 -->
          <el-form-item prop="password" label="密码">
            <div class="input-wrapper">
              <el-icon><Lock /></el-icon>
              <el-input
                v-model="registerForm.password"
                placeholder="请输入密码"
                type="password"
                name="password"
                size="large"
                show-password
              />
            </div>
          </el-form-item>

          <!-- 确认密码 -->
          <el-form-item prop="confirmPassword" label="确认密码">
            <div class="input-wrapper">
              <el-icon><Lock /></el-icon>
              <el-input
                v-model="registerForm.confirmPassword"
                placeholder="请再次输入密码"
                type="password"
                name="confirmPassword"
                size="large"
                show-password
              />
            </div>
          </el-form-item>

          <div class="form-row">
            <!-- 手机号码 -->
            <el-form-item prop="mobile" label="手机号码" class="half-width">
              <div class="input-wrapper">
                <el-icon><Phone /></el-icon>
                <el-input
                  v-model="registerForm.mobile"
                  placeholder="请输入手机号码"
                  name="mobile"
                  size="large"
                />
              </div>
            </el-form-item>

            <!-- 邮箱 -->
            <el-form-item prop="email" label="邮箱" class="half-width">
              <div class="input-wrapper">
                <el-icon><Message /></el-icon>
                <el-input
                  v-model="registerForm.email"
                  placeholder="请输入邮箱"
                  name="email"
                  size="large"
                />
              </div>
            </el-form-item>
          </div>

          <!-- 性别 -->
          <el-form-item prop="gender" class="gender-group-container" label="性别">
            <el-radio-group v-model="registerForm.gender" class="gender-group">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <div class="form-options">
            <el-checkbox v-model="registerForm.agreement">
              我已阅读并同意
              <el-link type="primary" href="/terms" class="terms-link">服务条款</el-link>
              和
              <el-link type="primary" href="/privacy" class="terms-link">隐私政策</el-link>
            </el-checkbox>
          </div>

          <!-- 注册按钮 -->
          <el-button
            :loading="loading"
            type="primary"
            size="large"
            class="register-button"
            @click.prevent="handleRegister"
          >
            注册
          </el-button>

          <div class="login-link">
            已有账号？
            <el-link type="primary" href="#" @click="router.push('/login')">立即登录</el-link>
          </div>
        </el-form>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="register-footer">
      <p>© {{ new Date().getFullYear() }} {{ defaultSettings.title }}. 保留所有权利。</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElForm } from "element-plus";
import LangSelect from "@/components/LangSelect/index.vue";
import defaultSettings from "@/settings";
import { useDark, useToggle } from "@vueuse/core";
import UserAPI from "@/api/system/user";

const router = useRouter();
const registerFormRef = ref<InstanceType<typeof ElForm>>();
const loading = ref(false);
const isDark = useDark();
const toggleTheme = useToggle(isDark);

// 注册表单数据
const registerForm = reactive({
  username: "",
  nickname: "",
  password: "",
  confirmPassword: "",
  mobile: "",
  email: "",
  gender: 1,
  agreement: false,
  // 默认角色ID，可以根据实际情况修改
  roleIds: [2], // 假设2是普通用户角色ID
  // 默认状态为启用
  status: 1,
});

// 表单验证规则
const registerRules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "用户名长度应在3-20个字符之间", trigger: "blur" },
  ],
  nickname: [
    { required: true, message: "请输入昵称", trigger: "blur" },
    { min: 2, max: 20, message: "昵称长度应在2-20个字符之间", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度应在6-20个字符之间", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
    {
      validator: (rule: any, value: string, callback: Function) => {
        if (value !== registerForm.password) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  mobile: [
    {
      pattern: /^$|^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],
  email: [
    {
      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
      message: "邮箱格式不正确",
      trigger: "blur",
    },
  ],
  agreement: [
    {
      validator: (rule: any, value: boolean, callback: Function) => {
        if (!value) {
          callback(new Error("请阅读并同意服务条款和隐私政策"));
        } else {
          callback();
        }
      },
      trigger: "change",
    },
  ],
});

// 处理注册
const handleRegister = async () => {
  if (!registerFormRef.value) return;

  registerFormRef.value.validate(async (valid) => {
    if (valid) {
      if (!registerForm.agreement) {
        ElMessage.warning("请阅读并同意服务条款和隐私政策");
        return;
      }

      loading.value = true;

      try {
        // 构建注册数据
        const registerData = {
          username: registerForm.username,
          nickname: registerForm.nickname,
          password: registerForm.password,
          mobile: registerForm.mobile,
          email: registerForm.email,
          gender: registerForm.gender,
          status: registerForm.status,
          roleIds: registerForm.roleIds,
        };

        // 调用注册API
        await UserAPI.register(registerData);

        ElMessage.success("注册成功，请登录");
        await router.push("/login");
      } catch (error: any) {
        console.error("注册失败:", error);
        ElMessage.error(error.message || "注册失败，请稍后重试");
      } finally {
        loading.value = false;
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.register-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: url("@/assets/images/loginBgc.jpg") no-repeat center center;
  background-size: cover;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
    backdrop-filter: blur(5px);
    z-index: 0;
  }

  .register-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    z-index: 1;

    .logo-container {
      display: flex;
      align-items: center;

      .logo {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.05);
        }
      }

      .site-name {
        font-size: 22px;
        font-weight: 600;
        margin: 0;
        background: linear-gradient(
          90deg,
          var(--el-color-primary) 0%,
          var(--el-color-primary-light-3) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 15px;

      .lang-select {
        margin-left: 10px;
      }
    }
  }

  .register-content {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 1;

    .register-banner {
      display: none;

      @media (min-width: 992px) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 40%;
        max-width: 500px;
        padding: 0 40px;

        .banner-text {
          h2 {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--el-color-primary);
          }

          p {
            font-size: 18px;
            color: var(--el-text-color-primary);
            margin-bottom: 30px;
          }
        }
      }
    }

    .register-form-container {
      width: 100%;
      max-width: 500px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(15px);
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
      }

      .register-form {
        padding: 35px;

        .form-header {
          text-align: center;
          margin-bottom: 35px;
          animation: fadeInDown 0.6s ease;

          h2 {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--el-color-primary);
            letter-spacing: 1px;
          }

          .form-subtitle {
            color: var(--el-text-color-secondary);
            font-size: 15px;
          }
        }

        :deep(.el-form-item) {
          margin-bottom: 22px;

          .el-form-item__label {
            padding-bottom: 8px;
            font-weight: 500;
            color: var(--el-text-color-primary);
          }

          &:last-child {
            margin-bottom: 0;
          }
        }

        .form-row {
          display: flex;
          gap: 15px;
          width: 100%;

          @media (max-width: 576px) {
            flex-direction: column;
            gap: 0;
          }

          .half-width {
            flex: 1;
            min-width: 0; // 防止溢出
          }
        }

        .input-wrapper {
          display: flex;
          align-items: center;
          background-color: var(--el-fill-color-blank);
          border: 1px solid var(--el-border-color-light);
          border-radius: 8px;
          padding: 0 15px;
          transition: all 0.3s;
          height: 50px;
          position: relative;
          overflow: hidden;
          width: 100%;

          &::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--el-color-primary);
            transition: width 0.3s ease;
          }

          &:focus-within {
            border-color: var(--el-color-primary);
            box-shadow: 0 0 0 3px rgba(var(--el-color-primary-rgb), 0.15);
            transform: translateY(-1px);

            &::before {
              width: 100%;
            }
          }

          .el-icon {
            font-size: 18px;
            color: var(--el-text-color-secondary);
            margin-right: 10px;
            flex-shrink: 0;
          }
        }

        :deep(.el-input) {
          flex: 1;
          min-width: 0;

          .el-input__wrapper {
            box-shadow: none !important;
            padding: 0;
            background-color: transparent;
          }

          input {
            height: 50px;
            color: var(--el-text-color-primary);
            font-size: 15px;

            &::placeholder {
              color: var(--el-text-color-placeholder);
              font-size: 14px;
            }
          }
        }

        .gender-group {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          gap: 30px;
          padding: 0 5px;
          margin-top: 5px;

          :deep(.el-radio) {
            margin-right: 0;
            padding: 6px 12px;
            border-radius: 6px;
            transition: background-color 0.3s;

            &:hover {
              background-color: var(--el-fill-color-light);
            }

            &.is-checked {
              background-color: rgba(var(--el-color-primary-rgb), 0.1);
            }
          }
        }

        .form-options {
          margin: 25px 0 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .terms-link {
            font-weight: 500;
            text-decoration: none;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        .register-button {
          width: 100%;
          height: 50px;
          font-size: 16px;
          font-weight: 500;
          margin-top: 10px;
          margin-bottom: 5px;
          border-radius: 8px;
          letter-spacing: 1px;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
              90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, 0.2) 50%,
              rgba(255, 255, 255, 0) 100%
            );
            transition: left 0.7s ease;
          }

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(var(--el-color-primary-rgb), 0.3);

            &::before {
              left: 100%;
            }
          }
        }

        .login-link {
          margin-top: 25px;
          text-align: center;
          font-size: 14px;
          color: var(--el-text-color-secondary);
          animation: fadeIn 0.8s ease;
          padding: 10px 0;
        }
      }
    }
  }

  .register-footer {
    position: relative;
    text-align: center;
    padding: 20px;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    z-index: 1;
  }
}

// 暗黑模式适配
html.dark {
  .register-container {
    &::before {
      background: rgba(0, 0, 0, 0.7);
    }

    .register-form-container {
      background: rgba(30, 30, 30, 0.9);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.1);

      .input-wrapper {
        background-color: rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 255, 255, 0.1);
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .register-container {
    .register-header {
      padding: 15px 20px;

      .logo-container {
        .logo {
          width: 30px;
          height: 30px;
        }

        .site-name {
          font-size: 18px;
        }
      }
    }

    .register-content {
      padding: 10px;

      .register-form-container {
        max-width: 100%;
        margin: 0 10px;
        border-radius: 12px;

        .register-form {
          padding: 25px 20px;

          .form-header {
            margin-bottom: 25px;

            h2 {
              font-size: 22px;
            }

            .form-subtitle {
              font-size: 14px;
            }
          }

          :deep(.el-form-item) {
            margin-bottom: 18px;

            .el-form-item__label {
              padding-bottom: 6px;
              font-size: 14px;
            }
          }

          .form-row {
            flex-direction: column;
            gap: 0;
          }

          .input-wrapper {
            width: 100%;
            height: 48px;
            padding: 0 12px;

            .el-icon {
              font-size: 16px;
              margin-right: 10px;
            }
          }

          :deep(.el-input) {
            width: 100%;

            .el-input__wrapper {
              padding-right: 10px;
            }

            input {
              height: 48px;
              font-size: 14px;
            }
          }

          .gender-group {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            gap: 30px;
            padding: 0 5px;
            margin-top: 5px;

            :deep(.el-radio) {
              padding: 6px 12px;
            }
          }

          .form-options {
            margin: 20px 0;
            font-size: 13px;
            padding: 0 5px;
          }

          .register-button {
            height: 48px;
            font-size: 16px;
          }

          .login-link {
            margin-top: 20px;
            font-size: 14px;
          }

          // 性别表单项特殊处理
          :deep(.el-form-item[prop="gender"]) {
            margin-top: 22px !important;

            .el-form-item__label {
              margin-bottom: 2px;
            }
          }
        }
      }
    }
  }
  .gender-group-container {
    margin-top: 20px;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
